<template>
  <div class="table">
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
      <div style="margin: 10px 0">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable
          style="width: 20%"
        >
        </el-input>
        <el-button type="primary " style="margin-left: 10px">查询</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="id" label="ID" sortable> </el-table-column>
      <el-table-column prop="adminname" label="用户名"> </el-table-column>
      <el-table-column prop="adminpassword" label="密码"> </el-table-column>
      <el-table-column prop="nickname" label="昵称"> </el-table-column>
      <el-table-column label="操作">
        <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-popconfirm title="确定删除吗？">
          <template #reference>
            <el-button
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              style="margin-left: 10px"
              >删除</el-button
            >
          </template>
        </el-popconfirm>
      </el-table-column>
    </el-table>
    <div style="margin: 20px 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <!-- 表单, 添加表单检验 -->
        <el-form :model="formData" :rules="addAdminRules" ref="addAdminFormRef">
          <el-form-item label="用户名" label-width="100px" prop="adminname">
            <el-input
              v-model="formData.adminname"
              style="width: 80%; margin-left: 20px"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" label-width="100px" prop="adminpassword">
            <el-input
              v-model="formData.adminpassword"
              style="width: 80%; margin-left: 20px"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="昵称" label-width="100px" prop="nickname">
            <el-input
              v-model="formData.nickname"
              style="width: 80%; margin-left: 20px"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import request from "../utils/request";
export default {
  data() {
    return {
      tableData: [],
      input: "",
      currentPage4: 1,
      total: 10,
      dialogVisible: false,
      /** form表单 */
      formData: {
        adminname: "",
        adminpassword: "",
        nickname: "",
      },
      addAdminFormRef: null, // ref
      /** form表单检验, 自行控制检验规则 */
      addAdminRules: {
        adminname: [{ required: true, message: "账号不能为空" }],
        adminpassword: [{ required: true, message: "密码不能为空" }],
        nickname: [{ required: true, message: "昵称不能为空" }],
      },
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    add() {
      this.dialogVisible = true;
      this.formData = {};
    },
    save() {
      // 保证传递的和后端接口想要的数据结构一致
      /**
        - 原来前端数据结构:
        {
          adminName: '1',
          adminPassword: '2',
          nickName: '3'
        }

        - 后端想要的数据结构
        {
          adminname: '1',
          adminpassword: '2',
          nickname: '3'
        }

        - 我修改了你的 form -> formData, 变成了
        {
          adminname: '',
          adminpassword: '',
          nickname: ''
        }
      */

      // 提交请求前,前form表单
      this.$refs.addAdminFormRef.validate((valid) => {
        if (!valid) {
          // 没通过检验
          this.$message({
            showClose: true,
            type: "error",
            message: "检验不通过,请检查",
          });
          return;
        }

        this.doSave();
      });
    },
    /** 提交保存，发生请求 */
    doSave() {
      const adminDto = JSON.parse(JSON.stringify(this.formData));
      console.log(adminDto);

      this.dialogVisible = false;
      request.post("/api/admin", adminDto).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.table {
  padding: 10px;
}
</style>
